<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        color: #2f4f4f;
        font-family: sans-serif;
      }

      #main-nav {
        margin-top: 10px;
        list-style: none;
        padding-left: 0;
      }

      #main-nav li {
        display: inline-block;
      }

      a {
        color: white;
        background-color: #13a4a4;
        padding: 5px;
        border-radius: 2px;
        text-decoration: none;
      }

      /* 权重比 #main-nav a低, 所以设置无效 */
      #main-nav .featured {
        /* 加上 important 会生效 */
        /* background-color: orange !important; */
        background-color: orange;
      }

      .featured:link {
        color: black;
      }

      #main-nav .featured:visited {
        color: red;
      }

      .featured:hover {
        color: blue;
      }
      .featured:active {
        color: green;
      }
    </style>
  </head>
  <body>
    <header class="page-header">
      <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
      <nav>
        <ul id="main-nav" class="nav">
          <li><a href="/">Home</a></li>
          <li><a href="/coffees">Coffees</a></li>
          <li><a href="/brewers">Brewers</a></li>
          <li>
            <a href="/specials" class="featured">Specials</a>
          </li>
        </ul>
      </nav>
    </header>
  </body>
</html>
